<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="css/commodity.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="./public/weibu.css">
    <link rel="stylesheet" href="./imgs/font/iconfont.css">
</head>
<style>

</style>
<body>
       <!-- 侧面图标 -->
    
    <div id="top">
    
    </div>
 <div class="nav-aa">    
    <div id="header">
        <h1 class="logo">
            <img src="./imgs/logo.png" alt="">
            <span><a href="">新品推荐</a></span>
            <span><a href="">热卖榜单</a></span>
        </h1>
        <div class="search-box">
            <div class="search">
                <input type="text" id="txt" >
                <button class="sousuo"><i class="iconfont">&#xe633;</button>
               
            </div>
            <ul class="list-r" id="sou"></ul>
           
        </div>
        <div class="search-suggest-list">
            <a href="" class="suggest-item">记录仪</a>
            <a href="" class="suggest-item">摄像机</a>
            <a href="" class="suggest-item">路由器</a>
            <a href="" class="suggest-item">耳机</a>
            <a href="" class="suggest-item">扫地机</a>
            <a href="" class="suggest-item">智能手表</a>
        </div>
    </div> 


<!-- 全部 -->
<!-- 三级菜单 -->

</div> 

     <div class="hr"></div> 


     <!-- 商品详情 -->

     
    <div id="gui">

   <div class="particulars"> 
         <div class="particulars-img"> 
             <div class="s_box">
               
                <img src="https://p0.ssl.qhimg.com/t01e5fa11aa2531ae5d.webp" alt="" class="active">
            
                <span></span>
                <em></em>
            </div>
            <div class="a_box">
            
                <img src="https://p0.ssl.qhimg.com/t01e5fa11aa2531ae5d.webp" alt="" class="active">
              
            </div>
            <div class="banner">
                <ul  class="banner-a">
                   
                </ul>
       
                <div class="btns">
                    <button id="left"><i class="iconfont">&#xe60b;
                    </i></button> 
                    <button id="right"><i class="iconfont">&#xe64f;
                    </i></button>
                </div>
                 
            </div>
            <div class="particulars-list">
                <span><i class="iconfont">&#xe65a;</i>优享商城发货&售后</span>
                <span><i class="iconfont">&#xe65a;</i>满99元包邮</span>
                <br>
                <span><i class="iconfont">&#xe65a;</i>7天无理由退货</span>
                <span><i class="iconfont">&#xe65a;</i>15天免费换货</span>
              
            </div> 
        </div>  
        <div class="details">
            <p class="details-a">360 自动出泡洗手机 穹灰蓝</p>
            <p class="details-b">&nbsp;&nbsp;极速出泡 有效抑菌 环保循环充电</p>
            <div class="details-price">
                <span>价&nbsp;&nbsp; 格</span>
                <em>￥</em><span class="ppp">19</span>
                 <em>￥</em><span class="asdf"><s>59</s></span>
                <br>
                <span>促&nbsp;&nbsp; 销</span>
                <span>直降</span>
                <span class="chuxiao">立减&nbsp;<em>40.00</em>  元</span>
            </div>
            <div class="inform">
                <i class="iconfont">&#xe606;</i><em>物流公告：受疫情及洪水影响，福建省厦门市、莆田市，黑龙江省哈尔滨市、绥化市，云南省德宏州瑞丽市，山西省运城市新绛县、晋中市介休市，青海省果洛藏族自治州，新疆喀什等部分地区暂停发货。</em>
            </div>
            <div class="classify">
                <span>分类 :</span>
               <div class="classify-a"></div>

            </div>
            <div id="num">
                <span>数&nbsp;&nbsp;  量</span>
                <input type="button" name="" value="-" id=" minus" style="width: 25px;height: 25px;">
                <input type="text" name="" id="atxt" placeholder="1">
                <input type="button" name="" style="width: 25px;height: 25px;" value="+" id=""
               >
            </div>
            <div class="integral"> 
                <span>积&nbsp;&nbsp;  分</span>
                <span>购买可获得<em>169</em>积分</span>
                <i class="iconfont">&#xe713;</i>
            </div>
            <div class="btnsa">
                <a href="./list.html"><input type="button" value="立即购买" name="" class="buy"> </a>
                <input type="button" value="加入购物车" name="" class="join"> 
            
            </div>

        </div>

    </div> 

    </div>

    <div class="details-img">
    <!-- <img src="https://p0.ssl.qhimg.com/t0130ba4ca979c28f6a.jpg" alt="">
    <img src="https://p3.ssl.qhimg.com/t017296043c72946c46.jpg" alt="">
    <img src="https://p4.ssl.qhmsg.com/t01cc835eb2aa23e7fc.webp" alt=""> -->
    </div>




    <div class="wei">
        <div class="weibu1">
            <a href="">
                <i class="iconfont
                 ">&#xe67d;</i> 七天无理由退货</a>
            <a href="">
                <i class="iconfont
                    ">&#xe67d;</i> 15天免费换货</a>
            <a href="">
                <i class="iconfont
                        ">&#xe67d;</i> 满99包邮</a>

        </div>

        <div class="wz-jz">
            ©2019-2021 mall.360.cn版权所有
        </div>
        <div class="wz-jz2">
            京ICP备08010314号-6 营业执照
        </div>

        <div class="wz-jz3">
            公司名称：北京视觉世界科技有限公司 | 社会统一信用代码：91110105336460203N | 食品经营许可证
        </div>
        <div class="wz-jz3">
            公司地址：北京市朝阳区酒仙桥路6号院2号楼1至17层102号内5层501 | 联系方式：400-6822-360
        </div>
    </div>


    <script src="./js/ajax.js">

    </script>
    <script>
        // 渲染
class List{
    constructor(){
        this.cont = document.querySelector(".banner-a")
        console.log(this.cont)
        this.url = "http://localhost:3000/database/msg.json";
        this.load();
        console.log(this.cont)
    }
    load(){
        ajax({
            url:this.url,
            success:(res)=>{
                this.res = JSON.parse(res).msg;
                console.log(this.res);
                this.render();
            }
        })
    }
    render(){
        let str = "";
        for(let i=0;i<this.res.length;i++){
            str += `  <div class="list-b">
            <a href="xqy.html">
             <img src="${this.res[0].img}" alt="">
           
           </a>
           <a href="xqy.html">
             <img src="${this.res[1].img}" alt="">
           
           </a>
           <a href="xqy.html">
             <img src="${this.res[2].img}" alt="">
           
           </a>
           <a href="xqy.html">
             <img src="${this.res[3].img}" alt="">
           
           </a>
       
        </div>`
        }
        this.cont.innerHTML = str;
    }
}
new List()
    </script>
<!-- 底部 -->
</body>

<script src="./js/jquery.js"></script>
<script src="./js/side.js"></script>
<script src="./js/commodity_main.js"></script>
<script src="./js/commodity.js"></script>
<script>
</script>
</html>


